<template>
  <div class="find">
    <van-nav-bar title="发现"> </van-nav-bar>
    <!-- 面试技巧 -->
    <div class="technic">
      <van-cell is-link value="查看更多" :border="false">
        <template #title>
          <span> 面试技巧</span>
        </template>
      </van-cell>
      <technic
        :item="item"
        v-for="(item, index) in technicList"
        :key="index"
      ></technic>
    </div>
    <!-- 市场数据 -->
    <div class="chart">
      <van-cell is-link value="查看更多" :border="false">
        <template #title>
          <span> 市场数据</span>
        </template>
      </van-cell>
      <!-- 进度条 -->
      <chart :ChartObj="ChartObj" :ChartArr="ChartArr"></chart>
      <!-- 展开更多 -->
      <van-cell>
        <div class="load_button" @click="load">
          <template v-if="isload === false">
            展开更多<van-icon name="arrow-down" />
          </template>
          <template v-else> 收起<van-icon name="arrow-up" /> </template>
        </div>
      </van-cell>
    </div>

    <!-- 面经分享 -->
    <div class="share">
      <van-cell is-link value="查看更多" @click="$router.push('/shareList')">
        <template #title>
          <span> 面经分享</span>
        </template>
      </van-cell>
      <share
        :item="item"
        v-for="(item, index) in shareList"
        :key="index"
      ></share>
    </div>
  </div>
</template>

<script>
import technic from './technic'
import chart from './chart'
import share from './share'
import { apiGetTechnic, apiGetShare, apiGetChart } from '@/api/find'
export default {
  components: {
    technic,
    chart,
    share
  },
  name: 'find',
  data () {
    return {
      technicList: [],
      shareList: [],
      ChartObj: {},
      ChartArr: [],
      isload: false
    }
  },
  methods: {
    // 面试技巧列表
    async getTechnic () {
      const res = await apiGetTechnic({ limit: 4 })
      // console.log(res)
      this.technicList = res.data.list
    },
    // 面经分享列表
    async getShare () {
      const res = await apiGetShare({ limit: 4 })
      // console.log(res)
      this.shareList = res.data.list
    },
    // 获取热门数据
    async getChart () {
      const res = await apiGetChart()
      console.log(res)
      res.data.yearSalary.reverse()
      this.ChartObj = res.data
      this.ChartArr = this.ChartObj.yearSalary.slice(0, 4)
    },
    // 展开更多
    load () {
      this.isload = !this.isload
      if (this.isload) {
        this.ChartArr = this.ChartObj.yearSalary
        console.log(this.ChartArr)
      } else {
        this.ChartArr = this.ChartObj.yearSalary.slice(0, 4)
      }
    }
  },
  created () {
    this.getTechnic()
    this.getShare()
    // this.getChart()
  },
  activated () {
    this.getChart()
  },
  deactivated () {
    this.isload = false
  }
}
</script>

<style lang="less" scoped>
.find {
  font-size: 12px;
  .technic,
  .chart {
    margin-bottom: 20px;
  }
  .load_button {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
  }
}
</style>
